<!-- 上传组件 -->
<template>
  <div class="upload-files">
    <Upload
      v-if="!disabled"
      :type="uploadType"
      :accept="acceptType"
      :action="baseUrl"
      :multiple="true"
      :on-progress="handlerProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-upload-list="false"
    >
      <Button type="primary">点击上传</Button>
    </Upload>
    <ul class="file-list">
      <li class="file-item" v-for="(it,i) in fileVoList" :key="it.fileId">
        <div class="file-name">{{ it.fileName }}</div>
        <div>
          <BtnText type="primary" @BtnClick="onView(it)">查看</BtnText>
          <BtnText v-if="!disabled" type="error" @BtnClick="onDel(i)">删除</BtnText>
        </div>
      </li>
    </ul>

    <Modal v-model="modalValue" title="预览">
      <vue-viewer v-if="image" style="display: inline-block; cursor: pointer" :thumb="image" :full="image"></vue-viewer>
      <div slot="footer" class="footer-btn">
        <BtnPlain type="primary" @click="modalValue = false">关闭</BtnPlain>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
const Setting = require("@/setting").default;
export default {
  name: "uploadFiles",
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      immediate: true, // 立即执行 :当刷新页面时会立即执行一次handler函数
      handler (val) {
        this.fileVoList = val || []
      }
    }
  },
  data () {
    return {
      baseUrl: Setting.apiBaseURL + "/global/base/app/singleFileUpload",
      acceptType: '',
      uploadType: 'drag',
      apiBaseURL: Setting.apiBaseURL,
      fileVoList: [],
      modalValue: false,
      image: ''
    };
  },
  methods: {
    handlerProgress () {
    },
    handleSuccess (res, file) {
      const data = file.response.data
      this.fileVoList.push(data)
      this.$emit("input", this.fileVoList);
    },
    handleError () {
      this.$message.error("文件上传失败");
    },
    onView (item) {
      this.image = this.apiBaseURL + item.filePreviewUrl;
      if (["png", "jpg", "jpeg"].includes(item.fileSuffix)) {
        this.modalValue = true;
        return;
      }
      window.open(this.image, "_blank");
    },
    onDel (i) {
      this.fileVoList.splice(i, 1)
      this.$emit("input", this.fileVoList);
    }
  },
};
</script>

<style lang="less" scoped>
.upload-files {
  width: 500px;
  .file-list {
    margin-top: 5px;
    padding-left: 63px;
  }
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #606266;
    padding-left: 5px;
    &:hover {
      border-radius: 5px;
      color: #2d8cf0;
      background-color: #eeeeeec4;
    }
  }

  .file-name {
    width: 330px;
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap; /* 强制不换行 */
  }
}
</style>

<style lang="less">
.upload-files {
  .ivu-upload-drag {
    border: none;
    text-align: left;
  }
}
</style>
